<template>
	<view class="container">
		<view class="main">
			<view class="card">
        
				<view class="input-container">
					
					<view class="form-group">
						<label class="block text-sm font-medium mb-1">菜单名称</label>
						<input type="text" v-model="dishName" class="form-control" placeholder="请输入菜单的名称" maxlength="50" />
					</view>
					
					<view class="form-group">
						<label class="block text-sm font-medium mb-1">做法</label>
						<textarea v-model="dishMethod" rows="4" class="form-control" placeholder="请输入做法" maxlength="500"></textarea>
					</view>
					
					<view class="form-group">
						<label class="block text-sm font-medium mb-1">食材</label>
						<textarea v-model="dishIngredients" rows="4" class="form-control" placeholder="请输入食材" maxlength="300"></textarea>
					</view>
					
					<view class="form-group">
						<label class="block text-sm font-medium mb-1">上传图片</label>
						<button @click="chooseImage">选择图片</button>
						<text v-if="imageUrl">{{ imageUrl }}</text>
					</view>
					
					<view class="form-group">
						<label class="block text-sm font-medium mb-1">上传视频</label>
						<button @click="chooseVideo">选择视频</button>
						<text v-if="videoUrl">{{ videoUrl }}</text>
					</view>
					
					<button class="btn btn-primary" @click="submitDish">
						<i class="fa fa-paper-plane"></i> 提交菜品信息
					</button>
				</view>
        
				<view class="media-previews" v-if="imageUrl || videoUrl">
					<view v-if="imageUrl">
						<text class="font-semibold text-lg mb-2">上传的图片</text>
						<image :src="imageUrl" mode="aspectFit" class="max-w-full h-auto rounded shadow"></image>
					</view>
					<view v-if="videoUrl">
						<text class="font-semibold text-lg mb-2">上传的视频</text>
						<video :src="videoUrl" controls class="max-w-full h-auto rounded shadow"></video>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getHeader from '@/api/api.js'
	export default {
		data() {
			return {
				dishName: '',
				dishMethod: '',
				dishIngredients: '',
				dishImage: '',
				dishVideo: '',
				imageUrl: '',
				videoUrl: ''
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async chooseImage() {
				const res = await uni.chooseImage({ count: 1 });
				this.dishImage = res.tempFilePaths[0];
				this.imageUrl = this.dishImage; // 实时显示选择的图片
			},
			async chooseVideo() {
				const res = await uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					camera: 'back'
				});
				this.dishVideo = res.tempFilePath;
				this.videoUrl = this.dishVideo; // 实时显示选择的视频
			},
			async submitDish() {
				const dishName = this.dishName.trim();
				const dishMethod = this.dishMethod.trim();
				const dishIngredients = this.dishIngredients.trim();
      
				if (!dishName || !dishMethod || !dishIngredients) {
					uni.showToast({
						title: '请填写所有必填信息',
						icon: 'none'
					});
					return;
				}

				try {
					uni.showLoading({ title: '上传中...' });
        
					let imageUrl = '';
					let videoUrl = '';
        
					// 上传图片
					if (this.dishImage) {
						const imageRes = await uni.uploadFile({
							url: '/api/upload',
							header:getheader(),
							filePath: this.dishImage,
							name: 'file'
						});
						if (imageRes.statusCode !== 200) {
							throw new Error(`图片上传失败: ${imageRes.errMsg}`);
						}
						imageUrl = JSON.parse(imageRes.data).url || '';
					}
        
					// 上传视频
					if (this.dishVideo) {
						const videoRes = await uni.uploadFile({
							url: '/api/upload',
							filePath: this.dishVideo,
							header:getHeader(),
							name: 'file'
						});
						if (videoRes.statusCode !== 200) {
							throw new Error(`视频上传失败: ${videoRes.errMsg}`);
						}
						videoUrl = JSON.parse(videoRes.data).url || '';
					}
			
					// 提交菜品信息
					const res = await uni.request({
						url: '/api/cuisine',
						method: 'POST',
						header:getHeader(),
						data: {
							dishName,
							dishMethod,
							dishIngredients,
							imageUrl,
							videoUrl
						}
					});
        
					if (res.statusCode !== 200) {
						throw new Error(`提交失败: ${res.errMsg}`);
					}
			
					uni.showToast({
						title: '提交成功！',
						icon: 'success'
					});
					
					// 重置表单
					this.dishName = '';
					this.dishMethod = '';
					this.dishIngredients = '';
					this.dishImage = '';
					this.dishVideo = '';
				} catch (error) {
					console.error('错误:', error);
					uni.showToast({
						title: `操作失败: ${error.message}`,
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			}
		}
	};
</script>

<style>
	.container {
		max-width: 750rpx;
		margin: 0 auto;
		padding: 0 30rpx;
	}

	.card {
		background-color: white;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.btn {
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s;
		border: none;
		outline: none;
	}

	.btn-primary {
		background-color: #409EFF;
		color: white;
	}


	.form-control {
		display: block;
		width: 100%;
		min-height: 64rpx; 
		padding: var(--base-padding) 20rpx; 
		font-size: var(--base-font-size);
		line-height: 1.4; 
		color: #606266;
		background-color: white;
		border: 2rpx solid #dcdfe6;
		box-sizing: border-box;
		vertical-align: middle;
	}

	.btn {
		padding: var(--base-padding) 24rpx; /* 减小按钮内边距 */
		border-radius: var(--base-border-radius);
		font-size: var(--base-font-size);
	}

	.input-container {
		max-width: 90%;
		margin: 0 auto;
	}

	.form-group {
		margin-bottom: 30rpx;
	}

	.main {
		padding: 60rpx 0;
	}

	.media-previews {
		margin-top: 40rpx;
	}

	.font-semibold {
		font-weight: 600;
	}

	.text-lg {
		font-size: 32rpx;
	}

	.mb-2 {
		margin-bottom: 10rpx;
	}

	.max-w-full {
		max-width: 100%;
	}

	.h-auto {
		height: auto;
	}

	.rounded {
		border-radius: 8rpx;
	}

	.shadow {
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}
</style>